<template>
  <el-card :body-style="{ padding: '10px' }" shadow="hover" style="border: 0">
    <div slot="header">
      <span style="color: rgb(236,232,237)">风场一次系统图</span>
      <el-button type="text" style="color: rgb(216,223,234)"
        class="farm-lookMoreBtn"
        @click="goview('风场一次系统图')">
        查看更多...
      </el-button>
    </div>
    <div class="block" style="margin:0 auto">
      <el-carousel trigger="click" height="35vh" indicator-position="outside" :interval=5000>
        <el-carousel-item v-for="farm in landFarms" :key="farm.id">
<!--          <h3 class="small">{{farm.name}}</h3>-->
          <el-image
            style="width: 100%; height: 100%"
            fit="contain"
            :src="URL + '/'+ farm.imgs.imgurl"
            class="image"></el-image>
        </el-carousel-item>
        <el-carousel-item v-for="farm in seaFarms" :key="farm.id">
          <!--          <h3 class="small">{{farm.name}}</h3>-->
          <el-image
            style="width: 100%; height: 100%"
            fit="contain"
            :src="URL + '/'+ farm.imgs.imgurl"
            class="image"></el-image>
        </el-carousel-item>
      </el-carousel>
    </div>
  </el-card>
</template>

<script>
import { baseURL } from '@/config/baseConfig'
import request from '../../../../../network/request'
export default {
  name: 'windFieldGraph',
  data () {
    return {
      baseUrl: baseURL,
      landFarms: [],
      seaFarms: []
    }
  },
  created () {
    this.URL = baseURL
    this.getAllFarms()
  },
  methods: {
    getAllFarms () {
      request({
        method: 'get',
        url: '/bulletin/showplantshowcase',
        params: {
          type: '1'
        }
      }).then(res => {
        this.landFarms = res.data.data
      }).catch((error) => {
        console.log(error)// 异常
      })
      request({
        method: 'get',
        url: '/bulletin/showplantshowcase',
        params: {
          type: '2'
        }
      }).then(res => {
        // console.log(res.data.data)
        this.seaFarms = res.data.data
        // this.seaFarms = res.data.data
      }).catch((error) => {
        console.log(error)// 异常
      })
    },
    goview (name) {
      this.$router.push({ name }).catch(err => {
        err && console.log('刷新') // 待优化
      })
    }
  }
}
</script>

<style scoped>
.el-card{
  height: 100%;
  border: 0;
  border-radius: 0;
  background-color: #e5e9f2;;
}
.el-card /deep/ .el-card__header {
  height: 10%;
  padding: 1vh 1vw;
  border-bottom: 0;
  box-sizing: border-box;
  background-color: rgb(126,101,63);
  color: white;
}
.farm-lookMoreBtn {
  float: right;
  padding: 0.2vh 0;
  color: white;
  font-size: 0.9em
}
.header span{
  font-size: 20px;
}
</style>
